<template>
<div class="wrapper" style="display: flex; flex-direction: column;">
  <v-header></v-header>
  <div style="flex:auto; flex-direction: column;position: relative;">
    <div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex;width:100%">
      <el-menu
        v-if="isLogin"
        :default-active="this.$route.path"
        class="el-menu-demo"
        @select="handleSelect"
        router
        background-color="#545c64"
        text-color="#fff" 
        active-text-color="#ffd04b"
        style="width:15%;"
      >
          <template v-for="item in items">
            <el-menu-item v-if="item.isShow" :index="item.index" :key="item.index">
              <i :class="item.icon"></i>
              <span>{{ item.title }}</span>
            </el-menu-item>
          </template>
      </el-menu>
       <div class="content">
          <div style="width:100%;overflow:auto;height:100%">
            <transition name="move" mode="out-in">
                <router-view></router-view>
            </transition>
          </div>
      </div>
    </div>
  </div>
</div>
</template>

<script>
import vHeader from './header.vue';
export default {
  components: { vHeader },
  data() {
    return {
      items: [
        {
          index: "/index",
          title: "首页",
          icon: 'el-icon-s-home',
          isShow:true,
        },
        
        {
          index: "/OwnerInfo",
          title: "人员管理",
          icon: 'el-icon-search',
          isShow:true,
        },
        {
          index: "/course",
          title: "课程管理",
          icon: 'el-icon-s-platform',
          isShow:true,
        },
        {
          index: "/equipment",
          title: "器材管理",
          icon: 'el-icon-s-custom',
          isShow:true,
        },
        {
          index: "/Approval",
          title: "审批记录",
          icon: 'el-icon-truck',
          isShow:true,
        },
        {
          index: "/PersonalInfo",
          title: "个人信息",
          icon: 'el-icon-s-custom',
          isShow:true,
        },
        {
          index: "/Recharge",
          title: "充值消费记录",
          icon: 'el-icon-chat-line-square',
          isShow:true,
        },
        {
          index: "/ScheduleInfo",
          title: "排班记录",
          icon: 'el-icon-chat-line-square',
          isShow:true,
        },
      ],
      isLogin:false,//是否登录
    }
  },
  created() {
    var userInfo = JSON.parse(window.sessionStorage.getItem('userInfo'))
    if(userInfo){
      if(userInfo.type==='1' || userInfo.type==='2'){
         this.items[1].isShow = true
         this.items[3].isShow = true
         this.items[7].isShow = true
      }else{
        this.items[1].isShow = false
         this.items[3].isShow = false
         this.items[7].isShow = false
      }
    }
  },
  mounted() {
    
    if(window.sessionStorage.getItem('TokenID')){
      this.isLogin = true
    }
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
  },
};
</script>
<style>
.content {
    width: 85%;
    height: 100%;
    padding: 5px;
    box-sizing: border-box;
    background: url(../../assets/5.jpg) no-repeat;
    background-size: cover;
    opacity: 0.95;
    /* background: rgb(73, 72, 72,0.4); */
}
</style>